import { Modal } from 'antd'
import React from 'react'
import LwjTable from 'components/LwjTable/LwjTable'
import moment from 'moment'
import OrderFilterExpand from 'components/Filter/OrderFilterExpand'

const SearchUserModal = ({
                           dataSource,
                           pagination,
                           dispatch,
                           toBeBoundUser,
                           onSelectRows,
                           ...ModalProps,
                         }) => {

  const listProps = {
    dataSource,
    pagination,
    pageChangeAction: 'user/query',
    dispatch,
    selectedRowKeys: toBeBoundUser,
    selectType: 'multiple',
    onSelectRows: onSelectRows
  }

  const columns = [
    {
      title: '用户名称',
      dataIndex: 'displayName',
      key: 'displayName'
    }, {
      title: '手机号',
      dataIndex: 'mobile',
      key: 'mobile'
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (text, record, index) => (moment(record.createTime).format('YYYY-MM-DD HH:mm:ss'))
    }
  ]

  // 定义筛选属性 表单相关
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'displayName',
        title: '用户名称'
      },
      {
        type: 'input',
        id: 'mobile',
        title: '手机号'
      }
    ],
    onFilterChange (value) {
      dispatch({
        type: 'user/query',
        payload: {
          ...value
        }
      })
    }
  }

  return (
    <div>
      <Modal {...ModalProps}>
        <OrderFilterExpand {...filterProps} />
        <LwjTable
          {...listProps}
          columns={columns}/>
      </Modal>
    </div>
  )
}

export default SearchUserModal
